<template>
  <view>
    <view
      :class="['nav-bar', isFixed ? 'fixed' : '', showBorder ? 'border' : '']"
      :style="{
        backgroundColor: bgColor,
        borderColor: borderColor,
        '--paddingleft': paddingRight + 'px',
      }"
    >
      <view
        class="status-bar"
        :style="{
          height: statusBarHeight + 'px',
        }"
      ></view>
      <view
        class="nav-content"
        :style="{
          height: navbarHeight + 'px',
          paddingLeft: paddingLeft + 'px',
          paddingRight: paddingRight + 'px',
        }"
      >
        <view
          class="left"
          v-if="showLeft"
          :style="{ color: supportWhiteBlack ? 'white' : '#333333' }"
        >
          <u-icon
            name="arrow-left"
            :color="supportWhiteBlack ? 'white' : '#333333'"
            size="22"
            v-if="showBack || back"
            @click="leftClick"
          />
          <u-icon
            name="home"
            :color="supportWhiteBlack ? 'white' : '#333333'"
            size="22"
            v-if="showHome"
            @click="goHome"
          />
          <slot name="navLeft" />
        </view>
        <view
          class="right"
          :style="[
            {
              left: paddingRight + 'px',
              width: screenWidth - paddingLeft - paddingRight * 2 + 'px',
              lineHeight: navbarHeight + 'px',
              textAlign: tittleAlgin,
              color: titleColor,
            },
            rightCustomerStyle,
          ]"
        >
          {{ title }}
          <slot v-if="!title" name="navContent" />
        </view>
      </view>
    </view>
    <view
      v-if="isPlaceholder"
      class="occupy"
      :style="{ height: statusBarHeight + navbarHeight + 'px' }"
    ></view>
  </view>
</template>

<script>
import { TABBAR } from "@/const/application/config";
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    isFixed: {
      type: Boolean,
      default: true,
    },
    isBorder: {
      type: Boolean,
      default: false,
    },
    bgColor: {
      type: String,
      default: "#ffffff",
    },
    backColor: {
      type: String,
      default: "#000",
    },
    titleColor: {
      type: String,
      default: "#000000",
    },
    isPlaceholder: {
      type: Boolean,
      default: true,
    },
    supportWhiteBlack: {
      type: Boolean,
      default: false,
    },
    showLeft: {
      type: Boolean,
      default: true,
    },
    showBorder: {
      type: Boolean,
      default: false,
    },
    borderColor: {
      type: String,
      default: "#f7f7f7",
    },
    tittleAlgin: {
      type: String,
      default: "center",
    },
    showBack: {
      type: Boolean,
      default: false,
    },
    rightCustomerStyle: {
      type: Object,
    },
  },
  created() {
    this.computedHeight();
    this.isShowBack();
  },
  mounted() {},
  data() {
    return {
      capsuleWidth: 0,
      back: true,
      statusBarHeight: 44,
      navbarHeight: 44,
      paddingLeft: 0,
      paddingRight: 0,
      navbarWidth: 0,
      screenWidth: 0,
      showHome: true,
      tabBarLists: TABBAR,
    };
  },
  computed: {
    homePath() {
      return "/pages/home/index";
    },
    height({ statusBarHeight, navbarHeight }) {
      return statusBarHeight + navbarHeight;
    },
  },
  methods: {
    computedHeight() {
      let sysInfo = uni.getSystemInfoSync();
      let custom = uni.getMenuButtonBoundingClientRect();
      let { screenWidth, statusBarHeight } = sysInfo;
      let { left: customLeft, width: customWidth } = custom;
      // 计算胶囊右边距离
      this.screenWidth = screenWidth;
      this.paddingLeft = screenWidth - (customLeft + customWidth);
      this.navbarHeight = (custom.top - statusBarHeight) * 2 + custom.height;
      this.statusBarHeight = statusBarHeight;
      this.paddingRight = this.paddingLeft + customWidth;
    },
    leftClick() {
      let { homePath } = this;
      let pages = getCurrentPages();
      console.log("leftClick", pages);
      if (pages.length <= 1) {
        uni.redirectTo({
          url: homePath,
        });
      } else {
        this.$Router.back(0);
      }
    },
    isShowBack() {
      let pages = getCurrentPages();
      console.log("isShowBack===", pages);
      let {
        $Route: { path },
        tabBarLists,
      } = this;
      if (pages.length <= 1) {
        this.back = false;
      } else {
        this.showHome = false;
      }
      tabBarLists.forEach((e) => {
        let tabPath = `${e.pagePath.split("?")[0]}`;
        if (tabPath === path) {
          this.showHome = false;
        }
        // if (tabPath == homePath) {
        //   this.homePath = e.openPath;
        // }
      });
    },
    exportHeight() {
      let { statusBarHeight, navbarHeight } = this;
      return statusBarHeight + navbarHeight;
    },
    goHome() {
      uni.reLaunch({
        url: this.homePath,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.fixed {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 999;
}
.border {
  border-bottom: 1px solid;
}
.nav-bar {
  .nav-content {
    display: flex;
    align-items: center;
    position: relative;
    //width: 0;
    .left {
      display: flex;
      font-size: 30rpx;
      color: #333333;
      margin-right: 15rpx;
    }
    .right {
      position: absolute;
      left: 0;
      top: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
      height: 100%;
    }
  }
}
</style>
